<template>
    <ManageStudentView>
        <div class="card-list-scrollable" style="max-height: 600px; display: flex; flex-wrap: wrap; padding: 10px;">
            <div class="card card-single" style="width: 19rem; margin-left: 15px; margin-bottom: 10px;" v-for="dynamic in dynamic_lists.dynamic_lists" :key="dynamic.id">
                <img :src="dynamic.photo" class="card-img-top" alt="...">
                <div class="card-body">
                    <span>
                        <h5 class="card-title">{{ dynamic.title }}</h5>
                        <h6 class="card-time">发布者：{{ dynamic.user_nickname }}</h6>
                        <h6 class="card-time">发布时间：{{ dynamic.submittime }}</h6>
                    </span>
                    <p class="card-text" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;">{{ dynamic.content }}</p>
                    <button type="button" class="btn btn-success btn-success-contact" v-if="dynamic.user_id !== 20" @click="to_contact(dynamic.user_id)">联系用户</button>
                    <button type="button" class="btn btn-danger btn-danger-contact" v-if="dynamic.user_id !== 20" @click="to_delete_dynamic(dynamic.id, dynamic.title)">删除动态</button>
                    <button type="button" class="btn btn-danger btn-danger-admin" v-if="dynamic.user_id === 20" @click="to_delete_dynamic(dynamic.id, dynamic.title)">删除动态</button>
                </div>
            </div>
        </div>

        <div class="tanchuang" v-if="is_open">
            <div class="mb-3">
                <div class="info_confirm">请确认是否是所选动态</div>
                <input type="text" class="form-control" :placeholder="delete_dyanmic_title" disabled>
            </div>
            <div>
                <button type="button" class="btn btn-success btn-tanchuang btn-1" @click="confirm_delete_dynamic">确定</button>
                <button type="button" class="btn btn-info btn-tanchuang btn-2" @click="close">取消</button>
            </div>
        </div>
    </ManageStudentView>
</template>

<script>
import ManageStudentView from '@/components/ManageStudentView.vue';
import $ from 'jquery';
import { reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
    name: "ManageDyanmicView",
    components: {
        ManageStudentView
    },

    setup() {
        const dynamic_lists = reactive({});
        const store = useStore();
        const is_open = ref(false);
        const delete_dynamic_id = ref('');
        const delete_dyanmic_title = ref('');
        const router = useRouter();
        $.ajax({
            url: 'http://47.121.28.202:8000/settings/dynamic/',
            type: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            success(resp) {
                dynamic_lists.dynamic_lists = resp;
                dynamic_lists.count = resp.length;
            }
        })

        const to_delete_dynamic = (dynamicid, dynamictitle) => {
            is_open.value = true;
            delete_dynamic_id.value = dynamicid;
            delete_dyanmic_title.value = dynamictitle;
        }
 
        const close = () => {
            is_open.value = false;
        }

        const confirm_delete_dynamic = () => {
            if (store.state.user.is_login) {
                $.ajax({
                    url: "http://47.121.28.202:8000/settings/dynamic/",
                    type: "DELETE",
                    headers: {
                         'Authorization': "Bearer " + store.state.user.access,
                    },
                    data: {
                        id: parseInt(delete_dynamic_id.value),
                    },
                    success() {
                        is_open.value = false;
                        dynamic_lists.dynamic_lists = dynamic_lists.dynamic_lists.filter(dynamic => dynamic.id !== delete_dynamic_id.value);
                    }
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        const to_contact = (userid) => {
            if (store.state.user.is_login) {
                router.push({
                    name: 'ordinarydialogue',
                    params: {
                        userid
                    }
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        return {
            dynamic_lists,
            to_delete_dynamic,
            close,
            confirm_delete_dynamic,
            delete_dyanmic_title,
            is_open,
            to_contact
        }
    }
}
</script>

<style scoped>
.card-img-top {
    height: 180px;
    width: 100%;
}
.card-list-scrollable {
    overflow-y: auto;
    border-radius: 5px;
}
.btn-success-contact {
    width: 125px;
    margin-bottom: 10px;
}
.btn-danger-contact {
    width: 125px;
    margin-bottom: 10px;
}
.btn-danger-admin {
    width: 100%;
}
.tanchuang {
    position: fixed;
    top: 50%; 
    left: 50%;  
    transform: translate(-50%, -50%);  
    height: 350px;  
    width: 500px;  
    background-color: rgba(211, 211, 211, 0.9);
    z-index: 1000;  
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;  
    padding: 20px;  
    box-sizing: border-box;
    border-radius: 10px;
}
.btn-tanchuang {
    margin: 10px;
}
.card-time {
    font-size: small;
}
</style>